<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	.pq-grid .darkblue td{
        background: darkblue;
        color:white;
    }
    .pq-grid .blue td{
        background: blue;
        color:white;
    }    
    .pq-grid .lightblue td{
        background: lightblue;
    }        
    .pq-grid .ShipCountry .freight{
        background: darkblue;
        color:white;        
    }    
    .pq-grid .ContactName .freight{
        background: blue;
        color:white;        
    }
	</style>

<script>
    $(function () {
        var formatCurrency = $.paramquery.formatCurrency,
            
            //groupby fields defined here.
            groupIndx = ["ShipCountry", "ContactName"],
            colM = [
            { title: "ShipCountry", width: 120, dataIndx: "ShipCountry",
                filter: {
                    type: 'select',
                    prepend: { '': 'All Countries' },                    
                    valueIndx: 'ShipCountry',
                    labelIndx: 'ShipCountry',
                    condition: 'equal',
                    listeners: ['change']
                }
            },
            { title: "Customer Name", width: 130, dataIndx: "ContactName" },
            { title: "Freight", width: 220, align: "right", cls: 'freight',
                //summary:{type:["sum", "sum"],title:["Total: {0}", "Sub Total: {0}"]},
                render: function (ui) {
                    return "$" + formatCurrency(ui.cellData);
                },
                summary: {
                    type: ["sum", "sum"],
                    title: [
                        function (ui) {
                            return ui.prevRowData[groupIndx[0]] + " Total: $" + formatCurrency(ui.rowData.Freight);
                        },
                        function (ui) {
                            return ui.prevRowData[groupIndx[1]] + " Total: $" + formatCurrency(ui.rowData.Freight);
                        }
                    ]
                },
                dataType: "float", dataIndx: "Freight"
            },
            { title: "Shipping Via", width: 130, dataIndx: "ShipVia" },
		    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
            { title: "Shipping Name", width: 210, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 220, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 130, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 100, dataIndx: "ShipRegion" },
            { title: "Postal Code", width: 100, dataIndx: "ShipPostalCode", minWidth: 100 }
		];
        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            url: "/Content/orders.json",
            //url: "/pro/orders/get",//for ASP.NET
            //url: "orders.php",//for PHP
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        };
        var groupModel = {
            dataIndx: groupIndx,
            collapsed: [false, false],
            title: [
                "<b style='font-weight:bold;'>{0} ({1} orders)</b>",
                "<b style='font-weight:bold;'>{0} ({1} orders)</b>"
            ],
            dir: ["up", "up"],
            titleCls: ['darkblue', 'blue'],
            summaryCls: ['ShipCountry', "ContactName"]
            //,icon: ["circle-plus", "circle-triangle", "triangle"]
        };
        var obj = {            
            height: 500,
            dataModel: dataModel,
            showBottom: false,
            colModel: colM,
            editable: false,
            filterModel: { on: true, header: true, type: "local" },
            selectionModel: { type: 'cell' },
            groupModel: groupModel,
            load: function (evt, ui) {            
                //options for ShipCountry filter.    
                var grid = $(this).pqGrid('getInstance').grid;                
                var column = grid.getColumn({ dataIndx: 'ShipCountry' });
                column.filter.options = grid.getData({dataIndx: ['ShipCountry']});
                column.filter.cache = null;
                grid.refreshHeader();                
            },
            title: "Shipping Orders",
            resizable: true,
            freezeCols: 2,
            virtualY: true,
            hwrap: false,
            wrap: false
        };
        $("#grid_group_rows").pqGrid(obj);

        //bind the click event of button
        $("button:contains('Toggle grouping')").click(function (evt) {
            var $grid = $("#grid_group_rows"), 
                groupModel = $grid.pqGrid('option', 'groupModel');
            if (groupModel) {
                var data = $grid.pqGrid('option', "dataModel").data;
                for (var i = 0; i < data.length; i++) {
                    //show all collapsed rows
                    data[i].pq_hidden = false;
                }
                $grid.pqGrid('option', "groupModel", null).pqGrid('refreshView');
            }
            else {
                $grid.pqGrid('option', "groupModel", obj.groupModel).pqGrid('refreshView');
            }
        });
    });
        
</script>    
</head>
<body>
The rows can be grouped by any number of fields with group Titles and aggregates/summary (optional). 
<button>Toggle grouping</button>

    <div id="grid_group_rows" style="margin:5px auto;"></div>

</body>

</html>
